<template>
	<div>
		<CommonCard title="累计订单量" :value="value">
			<template>
				<v-chart :options="getOptions()" />
			</template>
			<template slot="footer">
				昨日订单量
				<span class="emphasis">{{ 2000000 | thousands }}</span>
			</template>
		</CommonCard>
	</div>
</template>
<script>
import CommonCard from '../CommonCard/index';
export default {
	name: 'TotalOrders',
	components: {
		CommonCard,
	},
	data() {
		return {
			value: `¥ ${this.thousands('7608756')}`,
		};
	},
	methods: {
		getOptions() {
			return {
				grid: {
					top: 0,
					bottom: 0,
					left: 0,
					right: 0,
				},
				xAxis: {
					type: 'category',
					show: false, // 隐藏x
					boundaryGap: false, // 去除边距
				},
				yAxis: {
					show: false, // 隐藏y
				},
				// 单个图标展示样式
				series: {
					type: 'line',
					data: [50, 150, 100, 120, 90, 150, 100, 120, 90, 150],
					areaStyle: {
						// 面积
						color: 'purple',
					},
					lineStyle: {
						// 去掉线段
						width: 0,
					},
					itemStyle: {
						// 去掉小点
						opacity: 0,
					},
					smooth: true, // 平滑展示面积
				},
			};
		},
	},
};
</script>
<style lang="scss" scoped></style>
